<template>
  <view class="address-card f fd-col">
    <view class="address-card__user-info f ai-c jc-sb">
      <image
        :src="
          userInfo.mode === 0
            ? '/static/image/mail/pick-up.png'
            : '/static/image/mail/mail.png'
        "
        mode="widthFix"
        style="width: 60rpx"
      ></image>
      <view class="f f1 jc-sb w0">
        <text
          class="userName"
          style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
          >{{ userInfo.subUserName }}</text
        >
        <text class="userPhone">{{ userInfo.subUserPhone }}</text></view
      >
    </view>
    <view class="address-card__user-address f f1 jc-sb ai-c">
      <view class="address f1">{{ userInfo.subUserAddress }}</view>
      <view class="operation">
        <uni-icons
          :type="selectStatus ? 'checkbox-filled' : 'checkbox'"
          size="30"
        ></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "address-card",
  props: {
    userInfo: {
      type: Object,
      default: () => ({
        subUserName: "",
        subUserPhone: "",
        subUserAddress: "",
        mode: 0,
      }),
    },
    selectStatus: {
      type: Boolean,
      default: false,
    },
  },
  setup() {
    return {};
  },
};
</script>
<style lang='scss' scoped>
.address-card {
  margin: 20rpx auto;
  padding: 20rpx;
  width: 94%;
  height: 240rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
  background: #fff;
  box-shadow: 2px 2px 5px #ddd;
  &__user-info {
    height: 60rpx;
    line-height: 60rpx;
    font-weight: 600;
    font-size: 40rpx;
    font-family: "Times New Roman", Times, serif;
    .userName {
      margin-right: 20rpx;
    }
  }
  &__user-address {
    font-family: "楷体";
    font-size: 34rpx;
    .address {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .operation {
      ::v-deep .uniui-checkbox-filled,
      .uniui-checkbox {
        color: #24adf3 !important;
      }
    }
  }
}
</style>